<template>
  <div class="statistic" v-loading="loading">
    <div class="board">
      <div class="chart-row">
        <div class="chart-box" @click="getDetail('runningForce')">
          <div class="title">给进/起拔压力变化趋势</div>
          <div class="chart" ref="chart1"></div>
        </div>
        <div class="chart-box" @click="getDetail('rotateForce')">
            <div class="title">旋转扭矩变化趋势</div>
            <div class="chart" ref="chart2"></div>
        </div>
      </div>
        <div class="chart-row">
          <div class="chart-box" @click="getDetail('landForce')">
            <div class="title">泥浆泵压力变化趋势</div>
            <div class="chart" ref="chart3"></div>
          </div>
          <div class="chart-box" @click="getDetail('rotateSpeed')">
              <div class="title">动力头转速变化趋势表</div>
              <div class="chart" ref="chart4"></div>
          </div>
        </div>
    </div>
    <el-dialog
      width="90%"
      :modal="false"
      :fullscreen="true"
      :destroy-on-close="true"
      :visible="dialogVisible"
      @close="closeDialog">
      <div class="detail-title">{{detailTitle}}</div>
      <div class="detail" ref="detail"></div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mock1 } from '../assets/data/mock1'
import { mock2 } from '../assets/data/mock2'
import { mock3 } from '../assets/data/mock3'
import { mock4 } from '../assets/data/mock4'
import { mock5 } from '../assets/data/mock5'
import { mock6 } from '../assets/data/mock6'
import { mock7 } from '../assets/data/mock7'
import { fectLineChart } from '../chart/fectLineChart'
import { drawLineChart } from '../chart/lineChart'
// import { mock8 } from '../assets/data/mock8'
const chart = {
  runningForce: null,
  rotateSpeed: null,
  rotateForce: null,
  landForce: null
}
export default {
  data () {
    return {
      detailTitle: '',
      loading: true,
      dialogVisible: false,
      activeTab: 0,
      // option: '龙河定向钻穿越',
      // tabList: [
      //   '导向',
      //   '扩孔550',
      //   '扩孔850',
      //   '扩孔1050',
      //   '扩孔1250'
      // ],
      // options: [{
      //   value: '选项1',
      //   label: '龙河定向钻穿越'
      // }],
      renderData: {}

    }
  },

  computed: {
    ...mapState(['selectedProjectId'])
  },

  watch: {
    selectedProjectId (val) {
      this.loading = true
      this.getData()
    }
  },

  mounted () {
    this.getData()
  },
  methods: {
    sort (a, b) {
      const typeA = a.s.slice(0, 2)
      const typeB = b.s.slice(0, 2)
      if (typeA === typeB) {
        return Number(b.s.slice(2)) - Number(a.s.slice(2))
      }

      if (typeA !== typeB) {
        return typeB - typeA
      }
    },
    async getData () {
      if (!this.selectedProjectId) {
        this.$message({
          type: 'warning',
          message: '请选择工程信息',
          showClose: true
        })
        return
      }
      const query = {
        projectId: this.selectedProjectId
      }
      const res = await this.$store.dispatch('getChartData', query)
      this.loading = false
      if (res.success) {
        let { runningForce, landForce, rotateForce, rotateSpeed } = res.data
        this.renderData = res.data
        runningForce = runningForce.sort((a, b) => this.sort(a, b))
        landForce = landForce.sort((a, b) => this.sort(a, b))
        rotateForce = rotateForce.sort((a, b) => this.sort(a, b))
        rotateSpeed = rotateSpeed.sort((a, b) => this.sort(a, b))
        this.paintRunningForce('chart1', runningForce.map(item => {
          item.y = Number(item.y)
          return item
        }))
        this.paintRotateForce('chart2', rotateForce.map(item => {
          item.y = Number(item.y)
          return item
        }))
        this.paintLandForce('chart3', landForce.map(item => {
          item.y = Number(item.y)
          return item
        }))
        this.paintRotateSpeed('chart4', rotateSpeed.map(item => {
          item.y = Number(item.y)
          return item
        }))
      }
    },
    getDetail (key) {
      const name = {
        runningForce: '给进/起拔压力统计表',
        rotateForce: '旋转扭矩统计表',
        landForce: '泥浆泵压力统计表',
        rotateSpeed: '动力头转速统计表'
      }
      this.dialogVisible = !this.dialogVisible
      this.detailTitle = name[key]
      setTimeout(() => {
        const newKey = key.charAt(0).toUpperCase() + key.slice(1)
        this[`paint${newKey}`]('detail', this.renderData[key])
      }, 1000)
    },

    closeDialog () {
      this.dialogVisible = false
      if (this.detailTitle === '给进/起拔压力统计表') {
        this.paintRunningForce('chart1', this.renderData.runningForce)
      }
      if (this.detailTitle === '旋转扭矩统计表') {
        this.paintRotateForce('chart2', this.renderData.rotateForce)
      }
      if (this.detailTitle === '泥浆泵压力统计表') {
        this.paintLandForce('chart3', this.renderData.landForce)
      }
      if (this.detailTitle === '动力头转速统计表') {
        this.paintRotateSpeed('chart4', this.renderData.rotateSpeed)
      }
    },

    handleData (data, filterKey) {
      return data.map(item => {
        let value = ''
        if (typeof item[filterKey] === 'number') {
          value = item[filterKey]
        } else {
          const values = item[filterKey].split('-')
          value = values.length > 1 ? Number(values[1].trim()) : Number(values[0].trim())
        }
        const obj = {
          date: item.date,
          workName: item.workName,
          deepLength: item.deepLength
        }
        obj[filterKey] = value
        return obj
      })
    },

    combineData (filterKey) {
      return []
        // .concat(this.handleData(mock8, filterKey))
        .concat(this.handleData(mock7, filterKey))
        .concat(this.handleData(mock6, filterKey))
        .concat(this.handleData(mock5, filterKey))
        .concat(this.handleData(mock4, filterKey))
        .concat(this.handleData(mock3, filterKey))
        .concat(this.handleData(mock2, filterKey))
        .concat(this.handleData(mock1, filterKey))
    },

    changeRouter (path, index) {
      this.activeTab = Number(index)
    },

    paintRunningForce (ele, data) {
      // console.log(chart.runningForce)
      if (chart.runningForce) {
        chart.runningForce.destroy()
        chart.runningForce = null
      }
      const { innerWidth, innerHeight } = window
      // const data = this.combineData('runningForce')
      const {
        width = (innerWidth - 200),
        height = (innerHeight - 120)
      } = ele !== 'detail' ? this.$refs[ele].getBoundingClientRect() : ''
      const option = {
        data,
        width,
        height,
        unit: 'KN',
        position: 'x*y',
        container: this.$refs[ele]
      }
      chart.runningForce = drawLineChart(option)
    },
    paintRotateForce (ele, data) {
      if (chart.rotateForce) {
        chart.rotateForce.destroy()
        chart.rotateForce = null
      }
      const { innerWidth, innerHeight } = window
      // const data = this.combineData('rotateForce')
      const {
        width = (innerWidth - 200),
        height = (innerHeight - 120)
      } = ele !== 'detail' ? this.$refs[ele].getBoundingClientRect() : ''
      const option = {
        data,
        width,
        height,
        unit: 'KN·m',
        position: 'x*y',
        container: this.$refs[ele]
      }
      chart.rotateForce = drawLineChart(option)
    },
    paintLandForce (ele, data) {
      if (chart.landForce) {
        chart.landForce.destroy()
        chart.landForce = null
      }
      const { innerWidth, innerHeight } = window
      // const data = this.combisneData('landForce')
      const {
        width = (innerWidth - 200),
        height = (innerHeight - 120)
      } = ele !== 'detail' ? this.$refs[ele].getBoundingClientRect() : ''
      const option = {
        data,
        width,
        height,
        position: 'x*y',
        container: this.$refs[ele]
      }
      chart.landForce = fectLineChart(option)
    },
    paintRotateSpeed (ele, data) {
      if (chart.rotateSpeed) {
        chart.rotateSpeed.destroy()
        chart.rotateSpeed = null
      }
      const { innerWidth, innerHeight } = window
      // const data = this.combineData('rotateSpeed')
      const {
        width = (innerWidth - 200),
        height = (innerHeight - 120)
      } = ele !== 'detail' ? this.$refs[ele].getBoundingClientRect() : ''
      const option = {
        data,
        width,
        height,
        yAlias: '转速',
        unit: 'R/min',
        position: 'x*y',
        container: this.$refs[ele]
      }
      chart.rotateSpeed = fectLineChart(option)
    }
  }
}
</script>
<style scoped>
.statistic{
    height: 100%;
    /* background-color: #409EFF; */
    background: #1483f1;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5691c8, #457fca);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5691c8, #457fca); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.page-head{
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: .9375rem;
    padding: 1.25rem .9375rem;
}

.tab-list{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tab{
    margin-left: .9375rem;
    padding: 0 1.25rem;
    min-width: 6.25rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: .25rem;
    color: white;
}

.active{
    color: #f9f9f9;
    background-color: rgba(139, 69, 19, 0.8);
}

.work-points{
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
}

.work-point{
    min-width: 6.25rem;
    line-height: 2.5rem;
    background-color: rgba(139, 69, 19, 0.8);
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
}

.board{
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    box-sizing: border-box;

    padding: .9375rem;
    height: 100%;
}

.chart-row{
  /* flex: 1; */
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 48%;
}

.chart-box{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  box-sizing: border-box;
  padding: .9375rem;
  width: 49%;
  height: 98%;
  border-radius: .375rem;
  box-sizing: .25rem .25rem rgba(0, 0, 0, 0.3);
  background-color: #fff;
}

.title{
  box-sizing: border-box;
  padding: .625rem .9375rem;
  color: #333;
  text-align: left;
  font-size: 1.375rem;
}

.chart{
    flex: 1;
    width: 100%;
    /* height: 90%; */
}

.detail{
  height: 100%;
}

.detail-title{
  font-size: 1.5rem;
}
</style>
